<template>
  <ui-chart
    :height="height"
    :color="color"
    @add-series="handleAddSeries"
    @edit-series="handleEditSeries"
  >
    <ui-chart-legend :show="false"></ui-chart-legend>
    <slot></slot>
  </ui-chart>
</template>
<script>
export default {
  name: 'UiChartFunnel',
  props: {
    height: {
      type: String
    },
    color: {
      type: String
    }
  },
  provide () {
    return {
      UiChartType: 'funnel'
    }
  },
  computed: {
    chatConfig () {
      return {}
    }
  },
  methods: {
    handleAddSeries ({ series }) {
      const maxValue = Math.max.apply(null, (series.data || []).map(v => v.value))
      series.max = maxValue
      series.maxSize = '100%'
      series.min = 10
      series.minSize = '10%'
      series.width = '50%'
      series.top = 20
      series.bottom = 20
      series.left = 'center'
    },
    handleEditSeries ({ series }) {
      const maxValue = Math.max.apply(null, (series.data || []).map(v => v.value))
      series.max = maxValue
      series.maxSize = '100%'
      series.min = 10
      series.minSize = '10%'
      series.width = '50%'
      series.top = 20,
      series.bottom = 20
      series.left = 'center'
    }
  }
}
</script>
